<template>
  <div class="projectQuote" v-loading="pageLoading">
    <!-- <header class="flex-align-center">
      <span class="blueLine"></span>
      <span style="margin-left: 10px">待办任务</span>
      <span class="btnSave" @click="btnSave">提交</span>
    </header>-->

    <header class="flex-align-center">
      <el-button style="margin-left: 20px" @click="cancelBtn" size="mini">返回</el-button>
      <div class="absolute" style="float: right; right: 36px">
        <el-button type="primary" size="mini" @click="btnSave" v-if="status==1">提交</el-button>
      </div>
    </header>
    <main v-if="dataInfo">
      <!-- <div class="demandIdBox">: {{$route.query.id}}</div> -->
      <div class="infoBox" style="margin-top: 0">
        <el-descriptions title="基本信息" :column="4">
          <el-descriptions-item
            v-for="(item, index) in baseInfo"
            :key="'baseInfo' + index"
            :label="item.name"
          >
            <span v-if="item.key=='shippingRequirement'">
              <em v-if="dataInfo[item.key]=='1'">散货出</em>
              <em v-else-if="dataInfo[item.key]=='2'">栈板出</em>
              <em v-else-if="dataInfo[item.key]=='3'">静电箱出</em>
              <em v-else-if="dataInfo[item.key]=='4'">周转箱出</em>
              <em v-else>无</em>
            </span>
            <span v-else>{{ dataInfo[item.key] || (item.key == 'value' ? "字段暂无" : "无")}}</span>
          <!-- {{ dataInfo[item.key] || (item.key == 'value' ? "字段暂无" : "无")}} -->
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="infoBox">
        <el-descriptions title="产品信息" :column="4">
          <el-descriptions-item
            v-for="(item, index) in productInfo"
            :key="'productInfo' + index"
            :label="item.name"
          >
            <span v-if="item.type == 'array'">
              <template v-for="(it, ind) in dataInfo[item.key]">
                <el-tag style="margin-right: 10px" :key="'asdfg' + ind" size="medium">{{ it }}</el-tag>
              </template>
            </span>
            <span v-else-if="item.type == 'object'">
              <template v-for="(its, inds) in Object.keys(dataInfo[item.key])">
                <el-tag
                  style="margin-right: 10px"
                  :key="'asdfg' + inds"
                  size="medium"
                >{{ its }} : {{ dataInfo[item.key][its] ? dataInfo[item.key][its] + ' ‰' : '无'}}</el-tag>
              </template>
            </span>
            <span v-else>{{ dataInfo[item.key] || (item.key == 'value' ? "字段暂无" : "无") }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="infoBox">
        <el-descriptions title="采购物料报价" :column="8"></el-descriptions>
        <div style="height:auto;" v-if="status==1">
          <el-steps direction="vertical" :active="active">
            <el-step title="第一步">
              <template slot="description">
                <p style="color:#999;font-size:15px">下载代采物料清单</p>
                <p style="color:#333">
                  {{dataInfo.purchaseBomFile.name}}
                  <a
                    :href="dataInfo.purchaseBomFile.url"
                    style="margin-left:30px;color:#1890ff"
                  >下载</a>
                </p>
              </template>
            </el-step>
            <el-step title="第二步">
              <template slot="description">
                <p style="color:#999;font-size:15px">上传询价后采购物料清单</p>
                <p>
                  <FileUpload @FileList="uploadFile" :id="dataInfo.id" style="margin-left:20px"></FileUpload>
                </p>
                <p style="width: 1550px; overflow: hidden">
                  <el-table :data="previewData" style="width: 100%" border>
                    <el-table-column :width="it.width || '120'" v-for="it in materialItem" :prop="it.key" :label="it.name" :key="it.key"></el-table-column>
                  </el-table>
                </p>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div v-else>
          <p style="color:#999;font-size:15px">下载代采物料清单</p>
            <p style="color:#333">
              {{dataInfo.purchaseBomPriceFile.name}}
              <a
                :href="dataInfo.purchaseBomPriceFile.url"
                style="margin-left:30px;color:#1890ff"
              >下载</a>
            </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      pageLoading: false,
      loading: false,
      slaveOptions: [],
      slaveList: [],
      fixtureOptions: [],
      fixtureList: [],
      active: 1,
      queryParams: {
        pn: 1,
        ps: 10,
        quoteNo: '',
      },
      baseInfo: [
        { name: '客户名称', key: 'customer' },
        // {name: "加工模式", key: "value"},
        { name: '报价工厂', key: 'coopFactory' },
        { name: '合作模式', key: 'coopMode' },
        { name: '是否含税', key: 'includeTax' },
        { name: '我司合作主体', key: 'coopCompany' },
        { name: '出货要求', key: 'shippingRequirement' },
        { name: '库存物料是否回购', key: 'materialRepurchase' },
        // { name: '对账周期', key: 'accountingCycle' },
        { name: '账期', key: 'accountingPeriod' },
      ],
      processMap: {
        CI1: 'SMT',
        CI2: 'DIP',
        CI3: 'TEST',
        CI4: 'PACK',
      },
      dataInfo: null,
      productInfo: [
        { name: '产品名称', key: 'productName' },
        { name: '产品类型', key: 'productType' },
        { name: '产品规格', key: 'productSpec' },
        { name: '加工工艺', key: 'process', type: 'array' },
        { name: '损耗率', key: 'wastageRate', type: 'object' },
        { name: 'PCBA拼板后尺寸', key: 'pcbaPanelSize' },
        { name: '可插件PCBA尺寸', key: 'pcbaPluggableSize' },
      ],
      dataId: '',
      status: '',
      materialItem: [
        // { name: '序号', key: 'FBillHead(ENG_BOM)', width: "100"},
        // { name: '物料编码', key: 'FMATERIALID',  width: "200"},
        // { name: '(子项明细)项次', key: 'FReplaceGroup',  width: "150"},
        // { name: '*(子项明细)子项物料编码#编码', key: 'FMATERIALIDCHILD',  width: "200"},
        // { name: '物料名称', key: 'FName#2052',  width: "200"},
        // { name: '规格型号', key: 'FSpecification#2052',  width: "220"},
        // { name: '子项类型', key: 'FMATERIALTYPE',  width: "150"},
        // { name: '单位', key: 'FBaseUnitId', width: "150"},
        // { name: '用量:分子', key: 'FNUMERATOR' , width: "150"},
        // { name: '用量:分母', key: 'FDENOMINATOR', width: "150"},
        // { name: '物料单价', key: 'price',  width: "100"},
        // { name: '*(子项明细)生产区段#编码', key: 'F_PXJT_PPID', width: "200"},
        // { name: '(子项明细)变动损耗率%', key: 'FSCRAPRATE', width: "180"},
        // { name: '(子项明细)替代策略', key: 'FReplacePolicy', width: "150"},
        // { name: '(子项明细)替代优先级', key: 'FReplacePriority', width: "150"},
        // { name: '(子项明细)位置号', key: 'F_FPOSITIONNO' , width: "150"},
        // { name: '*(子项明细)货主类型', key: 'FOWNERTYPEID', width: "150"},
        // { name: '(子项明细)货主#编码', key: 'FOWNERID', width: "150"},
        // { name: '物料分组', key: 'FMaterialGroup', width: "150"},
        // { name: '物料属性', key: 'FErpClsID', width: "120"},
        // { name: '*(基本)存货类别#编码', key: 'FCategoryID', width: "150"},
        // { name: '(库存)批号编码规则#编码', key: 'FBatchRuleID', width: "200"},
        { name: 'No.', key: 'No.', width: "100"},
        { name: '物料分类（二级）', key: '物料分类（二级）', width: "100"},
        { name: '物料编码', key: '物料编码', width: "100"},
        { name: '物料名称', key: '物料名称', width: "100"},
        { name: '规格型号', key: '规格型号', width: "100"},
        { name: '(子项明细)子项类型', key: '(子项明细)子项类型', width: "100"},
        { name: '单位', key: '单位', width: "100"},
        { name: '用量', key: '用量', width: "100"},
        { name: '币种', key: '币种', width: "100"},
        { name: '税点', key: '税点', width: "100"},
        { name: '未税单价', key: '未税单价', width: "100"},
        { name: '未税金额', key: '未税金额', width: "100"},
        { name: '含税单价', key: '含税单价', width: "100"},
        { name: '含税金额', key: '含税金额', width: "100"},
        { name: '对内未税报价', key: '对内未税报价', width: "100"},
        { name: '对内未税金额', key: '对内未税金额', width: "100"},
        { name: 'MOQ', key: 'MOQ', width: "100"},
        { name: 'L/T', key: 'L/T', width: "100"},
        { name: '账期', key: '账期', width: "100"},
        { name: '品牌', key: '品牌', width: "100"},
        { name: '指定供应商', key: '指定供应商', width: "100"},
        { name: '采购', key: '采购', width: "100"}
      ],
      previewData: []
    }
  },
  created() {
    this.getBaseQuotation()
  },

  methods: {
    cancelBtn() {
      this.$confirm('确定取消填写，返回上一页吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$router.push({ path: '/task/index' })
      })
    },

    btnSave() {
      let params = {
        purchaseBomPriceFile: this.dataId,
        id: this.$route.query.id,
      }
      this.pageLoading = true
      this.$quote.putUpcomingTask(params).then((res) => {
        this.pageLoading = false
        if (res.code == 200) {
          this.$message.success('提交成功！')
          this.$router.push({ path: '/business/quote/index' })
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    /* 上传文件 */
    uploadFile(files) {
      this.dataId = files[0].res.data.id
      let data = files[0].res.data.data
      this.previewData = data
    },

    /* 获取工程报价基本信息 */
    getBaseQuotation() {
      this.pageLoading = true
      return new Promise((resolve) => {
        this.$quote
          .getUpcomingTaskById(this.$route.query.id)
          .then((res) => {
            this.pageLoading = false
            if (res.code == 200) {
              let temp = []
              res.data.data.process.forEach(it => {
                temp.push(this.processMap[it])
              })
              res.data.data.process = temp
              this.dataInfo = res.data.data
              this.status = res.data.status
              if (this.status == 2) {
                this.active = 2
              }
            } else {
              this.$message.error(res.code + '-' + res.msg)
            }

            resolve()
          })
          .catch((err) => {
            this.$message.error(JSON.stringify(err))
          })
      })
    },
  },
}
</script>

<style lang="less">
.projectQuote {
  width: 100%;
  height: calc(100vh - 84px);
  box-sizing: border-box;
  padding: 16px;
  background-color: #f3f5fa;
  overflow: auto;
  header {
    height: 50px;
    background-color: white;
    color: #666666;
    .blueLine {
      margin-left: 5px;
      height: 20px;
      width: 5px;
      background-color: #246cff;
    }
    .btnSave {
      height: 30px;
      text-align: center;
      width: 80px;
      line-height: 30px;
      color: #fff;
      background-color: #3377ff;
      text-align: center;
      margin-left: 1400px;
      cursor: pointer;
    }
  }
  main {
    margin-top: 20px;
    height: calc(100% - 70px);
    overflow: auto;
    .el-descriptions--medium:not(.is-bordered) th,
    .el-descriptions--medium:not(.is-bordered) td {
      padding-bottom: 20px;
    }
    .el-table {
      .el-table__header-wrapper {
        th {
          padding-bottom: 10px;
          // background-color: #1890ff;
          // color: white;
        }
      }
      .el-table__row {
        td {
          padding-bottom: 10px;
        }
      }
    }
    .demandIdBox {
      height: 36px;
      line-height: 36px;
      text-indent: 20px;
      background-color: white;
      color: #666666;
    }
    .infoBox {
      box-sizing: border-box;
      padding: 16px 20px;
      margin-top: 20px;
      background-color: white;
    }
    .el-descriptions-item__label {
      color: rgb(151, 151, 151);
      align-items: center;
    }
    .donwLoadBox {
      a {
        color: #3377ff;
      }
    }
  }
  .contentClass {
    box-sizing: border-box;
    padding: 0 16px;
  }
  .bottomBtnBox {
    height: 66px;
    border-top: 1px solid rgb(240, 240, 240);
    .el-button {
      margin: 10px 20px 0;
    }
  }
  .totalPriceBox {
    width: 1200px;
    height: 50px;
    justify-content: end;
  }
  .fixtureLeft {
    width: 15%;
    div {
      height: 45px;
      border: 1px solid #dfe6ec;
      border-top: none;
      text-align: center;
      line-height: 45px;
      margin-right: 20px;
      box-sizing: border-box;
    }
    & > div:nth-child(1) {
      border-top: 1px solid #dfe6ec;
      background-color: #46a6ff;
      border-color: #46a6ff;
      color: #fff;
    }
  }
  .labelWidth {
    min-width: 200px;
    text-align: end;
  }
}
</style>